<template>
  <div>
    <div style="margin-top:15px;height:30px;">
        <van-nav-bar title="现场执行" left-text="返回" left-arrow @click-left="onClickLeft">
        </van-nav-bar>

        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
        >
          <div class="detail" v-for="item in list" :key="item">
              <p style="padding-left: 1.3%;">场地名称：<span>{{item.sitename}}</span></p>
              <p style="padding-left: 1.3%;">活动名称：<span>{{item.activityName}}</span></p>
              <p style="padding-left: 1.3%;">活动日期：<span>{{item.activityTime}}</span></p>
              <div>
                  <table class="tab">
                    <tr>
                      <td style="border-right: 1px solid #ddd;width: 50%;line-height: 30px;">
                        <span  @click="openquestion">现场执行问题</span>
                      </td>
                      <td style=" width: 50%;   line-height: 30px;">
                        <span @click="openspot">验场</span>
                      </td>
                    </tr>
                  </table>
              </div>
          </div>
        </van-list>
    </div>
  </div>
</template>
<script>
import utils from "@/utils/Utils";
import { confirm } from "../../utils/plus/nativeUI";
    import {
      NavBar,
      Toast
    } from "vant";
    export default {
      components: {
        [NavBar.name]: NavBar,
        [Toast.name]:Toast
      },
      created() {

      },
      data() {
          return {
            list:[{
              sitename:"上海1862时尚艺术中心",
              activityName:"玩转都市游乐场",
              activityTime:"2018-09-05"
            },
            {
              sitename:"上海1862时尚艺术中心2",
              activityName:"玩转都市游乐场2",
              activityTime:"2018-09-02"
            },
            {
              sitename:"上海1862时尚艺术中心3",
              activityName:"玩转都市游乐场3",
              activityTime:"2018-09-01"
            }]
          };
      },

      methods: {
        onClickLeft() {
          utils.closeModal();
        },
        openquestion(){
            utils.openModal({
              url: "./spotExecutive.question.html",
              id: "spotExecutive.question",
              navbar: false
            });
        },
        openspot(){
            utils.openModal({
              url: "./spotExecutive.spot.html",
              id: "spotExecutive.spot",
              navbar: false
            });
        }
      }
    };
</script>
<style lang="less">
  .tab{
    width: 100%;
    height: 100%;
    text-align: center;
    color: #2B75BB;
    border-top: 1px solid #ddd;
  }
  .detail{
    width:92%;
    margin:0 aut0;
    border:1px solid #ccc;
    margin-top:10px;
    margin-left:4%;
    border-radius: 10px;
  }

</style>
